<template>
    <el-breadcrumb
        separator="/"
        class="breadcrumb"
    >
        <el-breadcrumb-item
            v-for="match in matched"
            :key="match.path"
        >
            <a
                v-if="match.path !== '/'"
                :href="match.path"
            >
                {{ subName('sidebar.' + match.meta.name, match.meta.name) }}
            </a>
            <span v-else>
                {{ subName('sidebar.' + match.meta.name, match.meta.name) }}
            </span>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
export default {
    name: "Index",
    data() {
        return {
            matched: null
        }
    },
    watch: {
        $route() {
            // 监听路由变化，并且获取当前路由
            this.matched = this.$router.currentRoute.value.matched
        }
    },
    mounted() {
        if (!this.matched) {
            this.matched = this.$router.currentRoute.value.matched
        }
    },
    methods: {
        subName(i18nKey, val) {
            return this.$t(i18nKey) === i18nKey ? val : this.$t(i18nKey);
        }
    }
}
</script>

<style scoped>
    .breadcrumb {
        font-size: 14px;
        line-height: 56px;
    }
</style>
